<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:400px;">
<div class="flex ac-table-head" style="justify-content:flex-start;">
    <div class="ac-table-title">{{publicRole.title}}</div>
    <div class="ac-table-oper"><el-button size="medium"  v-if="publicRole.operVisible.add==undefined || publicRole.operVisible.add" @click="publicRole_openAddSysRole()" :disabled="publicRole.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
<el-button size="medium"  v-if="publicRole.operVisible.edit==undefined || publicRole.operVisible.edit" @click="publicRole_editAddSysRole()" :disabled="publicRole.operDisabled.edit"  type="text"     native-type="button">编辑(E)</el-button>
<el-button size="medium"  v-if="publicRole.operVisible.del==undefined || publicRole.operVisible.del" @click="publicRole_delete()" :disabled="publicRole.operDisabled.del"  type="text"     native-type="button">删除(D)</el-button>
<el-button size="medium"  v-if="publicRole.operVisible.query==undefined || publicRole.operVisible.query" @click="publicRole_load()" :disabled="publicRole.operDisabled.query"  type="text"     native-type="button">刷新(Q)</el-button>
</div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="publicRole.data" size="mini" ref="publicRole"
       
    height="100%"
    @current-change="publicRole_currentChange">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="label" label="角色名称"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.label}}
   </template>
</el-table-column>
<el-table-column prop="isDefault" label="默认角色"    align="center"  show-overflow-tooltip class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.isDefault"  size="small"  true-label="Y"  false-label="N" disabled ></el-checkbox>

   </template>
</el-table-column>

</el-table>

</div>

          
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 402px);">
<el-tabs type="border-card" v-model="page.tabs" class=""  >
<el-tab-pane class="" label="PC端授权" name="tab1" :disabled="tabDisabled.tab1" v-if="tabVisible.tab1" >
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title"></div>
    <div class="ac-tree-oper">
        <el-button size="medium"  v-if="publicRoleMenus.operVisible.C==undefined || publicRoleMenus.operVisible.C" @click="publicRoleMenus_save()" :disabled="publicRoleMenus.operDisabled.C"  type="text"     native-type="button">保存</el-button>

    </div>
</div>
<div class="ac-tree-content">
    <el-tree ref="publicRoleMenus" :data="publicRoleMenus.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="publicRoleMenus.currentNodeKey"  
    show-checkbox  :default-checked-keys="publicRoleMenus.defaultCheckedKeys" 
    
      
       
    @check="publicRoleMenus_check"
    @current-change="publicRoleMenus_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i v-if="data.children && data.children.length>0" class="el-icon-folder"></i>
        <i v-else class="el-icon-document"></i>
        {{ data.name }}
    </span>
</span>
</el-tree>

</div>
</el-tab-pane>
<el-tab-pane class="" label="APP端授权" name="tab2" :disabled="tabDisabled.tab2" v-if="tabVisible.tab2" >
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title"></div>
    <div class="ac-tree-oper">
        <el-button size="medium"  v-if="publicRoleAppMenus.operVisible.C==undefined || publicRoleAppMenus.operVisible.C" @click="publicRoleAppMenus_save()" :disabled="publicRoleAppMenus.operDisabled.C"  type="text"     native-type="button">保存</el-button>

    </div>
</div>
<div class="ac-tree-content">
    <el-tree ref="publicRoleAppMenus" :data="publicRoleAppMenus.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="publicRoleAppMenus.currentNodeKey"  
    show-checkbox  :default-checked-keys="publicRoleAppMenus.defaultCheckedKeys" 
    
      
       
    @check="publicRoleAppMenus_check"
    @current-change="publicRoleAppMenus_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
        <i v-if="data.children && data.children.length>0" class="el-icon-folder"></i>
        <i v-else class="el-icon-document"></i>
        {{ data.name }}
    </span>
</span>
</el-tree>

</div>
</el-tab-pane>

</el-tabs>

</div>

<el-dialog :visible.sync="addSysRole.visible" :title="addSysRole.title"
            width="400px"
                
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""    label-width="80px" label-position="right"
     size="mini" ref="addSysRole" :model="addSysRole.data" :rules="addSysRole.rules"  
     :disabled="addSysRole.disabled" @submit.native.prevent>
    <el-row><el-col :span=24 v-if="addSysRole.itemVisible.label==undefined || addSysRole.itemVisible.label">
    <el-form-item prop="label" label="角色名称">
        
<el-input type="text" size="mini"  v-model="addSysRole.data.label" placeholder="角色名称" :disabled="addSysRole.itemDisabled.label"  @keyup.enter.native="addSysRole_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="addSysRole.itemVisible.isDefault==undefined || addSysRole.itemVisible.isDefault">
    <el-form-item prop="isDefault" label="默认角色">
        <el-checkbox  v-model="addSysRole.data.isDefault"  size="mini"  true-label="Y"  false-label="N" :disabled="addSysRole.itemDisabled.isDefault"  @keyup.enter.native="addSysRole_dialogOk"></el-checkbox>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="addSysRole_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="addSysRole_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"publicRole":{"title":"公共角色","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{"edit":"","add":"","del":"","query":""},"operVisible":{},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"publicRoleAppMenus":{"title":"角色APP授权","data":[],"defaultCheckedKeys":[],"currentNodeKey":{},"operData":{"C":""},"operVisible":{},"operDisabled":{},"currentRow":{}},"publicRoleMenus":{"title":"角色菜单","data":[],"defaultCheckedKeys":[],"currentNodeKey":{},"operData":{"C":""},"operVisible":{},"operDisabled":{},"currentRow":{}},"page":{"tabs":"tab1"},"tabDisabled":{"tab1":false,"tab2":false},"tabVisible":{"tab1":true,"tab2":true},"customOptions":{},"dictOptions":{},"addSysRole":{"visible":false,"title":"添加角色","data":{"isDefault":"N"},"operData":{},"operVisible":{},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{},"itemDisabled":{},"transfer":{},"rules":{"label":[{"required":true,"message":"请输入角色名称","trigger":"blur"},{"trigger":"blur","max":20,"min":1,"message":"长度在 1 到 20 个字符"}]}}}
            },
            watch: {
},
            methods: {
publicRoleAppMenus_allowDrag:function(node){
    return true;
},
publicRole_delete: function(){
    let that = this;
    let id=this.publicRole.currentRow.id;
    if(id){
        HttpApi.delProviderConfirm("sysRoles", this.publicRole.currentRow,function(res){
            let index = that.publicRole.data.findIndex(function(item){
                return item.id==id;
            });
            
            that.publicRole.data.splice(index,1);
            if(that.publicRole.data.length==0){
                that.$data.publicRole.currentRow = that.$options.data().publicRole.currentRow;
                that.$refs.publicRole.setCurrentRow();
            }else if(that.publicRole.data.length>index){
                that.$refs.publicRole.setCurrentRow(that.publicRole.data[index]);
            }else{
                that.$refs.publicRole.setCurrentRow(that.publicRole.data[index-1]);
            }
            that.$message.success("删除成功");
        });
    }else{
        that.$alert("请选择要删除的数据");
    }
},
publicRole_editAddSysRole:function() {
    let that = this;
    this.addSysRole.editorForm = true;
    if (!this.publicRole.currentRow.id) {
        this.$alert("请先选中一条公共角色信息");
        return;
    } else {
        this.addSysRole_dialogOpen(this.publicRole.currentRow, function(dialogData) {
            HttpApi.post("/platform/roles/savePublicRole", dialogData, function(res) {
                let index = that.publicRole.data.findIndex(function(item) {
                    return item.id == res.id;
                });
                that.$set(that.publicRole.data, index, res);
                that.$refs.publicRole.setCurrentRow(res);
                that.$message.success("操作成功！");
                that.addSysRole.visible = false;
            });
        })
    }
},
publicRoleAppMenus_check:function(node,list){
        
},
addSysRole_dialogCancel:function(){
     this.addSysRole.visible = false;
},
publicRole_currentChange:function(currentRow){
    if(currentRow){
        this.publicRole.currentNodeKey=currentRow.id;
        this.publicRole.currentRow = currentRow;
            this.publicRoleAppMenus.operData.roleId=this.publicRole.currentRow.id;
this.publicRoleAppMenus_load();
    this.publicRoleMenus.operData.roleId=this.publicRole.currentRow.id;
this.publicRoleMenus_load();

    }else{
        this.$data.publicRole.currentNodeKey=this.$options.data().publicRole.currentNodeKey;
        this.$data.publicRole.currentRow = this.$options.data().publicRole.currentRow;
        this.$data.publicRoleAppMenus.operData=this.$options.data().publicRoleAppMenus.operData;
this.$data.publicRoleAppMenus.data=this.$options.data().publicRoleAppMenus.data;
this.$data.publicRoleMenus.operData=this.$options.data().publicRoleMenus.operData;
this.$data.publicRoleMenus.data=this.$options.data().publicRoleMenus.data;

    }
    this.publicRole_operCtrl(currentRow);
},
publicRoleMenus_nodeClick:function(data,node){
    this.publicRoleMenus.currentNodeKey=data.id;
},
publicRoleMenus_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
addSysRole_dialogOk:function(){
      let that = this;
      this.$refs.addSysRole.validate(function(valid){
           if(valid){
                that.addSysRole.callback(that.addSysRole.data);
           }else{
                return false;
           }
      });
},
publicRoleMenus_currentChange: function(data,node){
    if(data){
        this.publicRoleMenus.currentNodeKey=data.id;
        this.publicRoleMenus.currentRow = data;
    }else{
        this.$data.publicRoleMenus.currentNodeKey=this.$options.data().publicRoleMenus.currentNodeKey;
        this.$data.publicRoleMenus.currentRow = this.$options.data().publicRoleMenus.currentRow;
    }
    
 },
publicRoleAppMenus_currentChange: function(data,node){
    if(data){
        this.publicRoleAppMenus.currentNodeKey=data.id;
        this.publicRoleAppMenus.currentRow = data;
    }else{
        this.$data.publicRoleAppMenus.currentNodeKey=this.$options.data().publicRoleAppMenus.currentNodeKey;
        this.$data.publicRoleAppMenus.currentRow = this.$options.data().publicRoleAppMenus.currentRow;
    }
    
 },
publicRole_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.publicRole.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.publicRole.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
addSysRole_load:function(){
    let that = this;
    HttpApi.queryObject("sysRoles",this.addSysRole.operData,function(res){
        that.addSysRole.data = res;
    });
},
publicRoleAppMenus_save:function() {
    let that = this;
    let checkedKeys = this.$refs.publicRoleAppMenus.getCheckedKeys();
    let param = {};
    param.checkedKeys = checkedKeys;
    param.roleId = this.publicRoleAppMenus.operData.roleId;
    HttpApi.post("/platform/roles/savePublicAppRoleMenus", param, function(res) {
        that.$message.success("保存成功");
    })
},
publicRoleAppMenus_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
publicRoleAppMenus_load:function() {
    let that = this;
    HttpApi.queryDs("platformRole.publicRoleAppMenus", that.publicRoleAppMenus.operData, function(res) {
        that.$set(that.publicRoleAppMenus, "defaultCheckedKeys", res.defaultCheckedKeys);
        that.$set(that.publicRoleAppMenus, "data", res.data);

        if (res.data.length > 0) {
            that.$nextTick(function() {
                that.$refs.publicRoleAppMenus.setCurrentKey(res.data[0].id);
                that.publicRoleAppMenus_currentChange(res.data[0]);
            });
        } else {
            that.publicRoleAppMenus_currentChange();
        }
    });
},
publicRole_change:function(fieldName,row){
    HttpApi.updateProvider("sysRoles",fieldName,row,function(){
                        
    });
},
publicRoleMenus_save:function() {
    let that = this;
    let checkedKeys = this.$refs.publicRoleMenus.getCheckedKeys();
    let param = {};
    param.checkedKeys = checkedKeys;
    param.roleId = this.publicRoleMenus.operData.roleId;
    HttpApi.post("/platform/roles/savePublicRoleMenus", param, function(res) {
        that.$message.success("保存成功");
    })
},
publicRoleAppMenus_nodeDrop:function(draggingNode, dropNode, dropType, ev){
	let that = this;
	/*共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、
	    被拖拽节点的放置位置（before、after、inner）、event	*/
	
},
publicRoleAppMenus_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
publicRoleAppMenus_treeCommand:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
            HttpApi.saveProvider("publicRoleMenus",dailogData,function(res){
                if(res.parentId=="-1"){
                    that.publicRoleAppMenus.data.push(res);
                }else{
                    that.$refs.publicRoleAppMenus.append(res,res.parentId);
                }
                that.{dialogCode}.visible = false;
            });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("sysMenus",param.nodeData,function(res){
            that.$refs.publicRoleAppMenus.remove(param.nodeData);
            that.publicRoleAppMenus_currentChange();
        });
    }
},
publicRoleMenus_load:function() {
    let that = this;
    HttpApi.queryDs("platformRole.publicRoleMenus", that.publicRoleMenus.operData, function(res) {
        that.$set(that.publicRoleMenus, "defaultCheckedKeys", res.defaultCheckedKeys);
        that.$set(that.publicRoleMenus, "data", res.data);

        if (res.data.length > 0) {
            that.$nextTick(function() {
                that.$refs.publicRoleMenus.setCurrentKey(res.data[0].id);
                that.publicRoleMenus_currentChange(res.data[0]);
            });
        } else {
            that.publicRoleMenus_currentChange();
        }
    });
},
publicRoleMenus_allowDrag:function(node){
    return true;
},
publicRoleMenus_checkChange:function(data, checked, indeterminate) {
    console.log(data, checked, indeterminate);
},
publicRoleMenus_check:function(node,list){
        
},
publicRoleMenus_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
publicRoleMenus_treeCommand:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
            HttpApi.saveProvider("publicRoleMenus",dailogData,function(res){
                if(res.parentId=="-1"){
                    that.publicRoleMenus.data.push(res);
                }else{
                    that.$refs.publicRoleMenus.append(res,res.parentId);
                }
                that.{dialogCode}.visible = false;
            });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("sysMenus",param.nodeData,function(res){
            that.$refs.publicRoleMenus.remove(param.nodeData);
            that.publicRoleMenus_currentChange();
        });
    }
},
publicRole_load:function() {
    let that = this;
    HttpApi.queryDs("platformRole.publicRole", this.publicRole.operData, function(res) {
        that.publicRole.data = res;
        if (that.publicRole.data.length > 0) {
            that.$refs.publicRole.setCurrentRow(that.publicRole.data[0]);
            that.publicRole_operCtrl(that.publicRole.data[0]);
        } else {
            that.$refs.publicRole.setCurrentRow();
            that.publicRole_operCtrl();
        }
    });
},
publicRoleMenus_nodeDrop:function(draggingNode, dropNode, dropType, ev){
	let that = this;
	/*共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、
	    被拖拽节点的放置位置（before、after、inner）、event	*/
	
},
addSysRole_dialogOpen:function(param,callback){
    this.$data.addSysRole.data = this.$options.data().addSysRole.data;
    for(let val in param) {
        this.$set(this.addSysRole.data, val, param[val])
    }
    this.addSysRole.callback=callback;
    this.addSysRole.visible = true;
}
,
publicRoleAppMenus_nodeClick:function(data,node){
    this.publicRoleAppMenus.currentNodeKey=data.id;
},
publicRole_openAddSysRole:function() {
    let that = this;
    this.addSysRole.editorForm = false;
    let param = {};
    this.addSysRole_dialogOpen(param, function(dialogData) {

        HttpApi.post("/platform/roles/savePublicRole", dialogData, function(res) {
            that.$message.success("操作成功！");
            that.publicRole.data.push(res);
            that.$refs.publicRole.setCurrentRow(res);
            that.addSysRole.visible = false;
        });
    })
},
publicRoleAppMenus_checkChange:function(data, checked, indeterminate) {
    console.log(data, checked, indeterminate);
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions([],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    

    //加载初始化load
    this.publicRole_load();


    //加载初始化方法
    
}
    });
    

    
</script>
</html>
